import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Image } from 'ant-design-vue'
import { DeleteOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { withModifiers } from 'vue'

@Component
export class ImageDelete extends Render {
    @Prop() src?: string
    @Prop() fallback?: string
    @Prop() width?: string
    @Prop() height?: string
    @Prop() preview?: boolean

    @Emit('remove')
    handleEmit(){}

    onRemove(ev: MouseEvent) {
        ev.stopPropagation()
        this.handleEmit()
    }

    render() {
        return <Image src={this.src} width={this.width} height={this.height} fallback={this.fallback} preview={this.preview ?? true} v-slots={{
            previewMask: () => {
                return (
                    <div class="flex justify-between gap-20px">
                        <div>
                            <EyeOutlined />
                        </div>
                        <div onClick={ this.onRemove }>
                            <DeleteOutlined />
                        </div>
                    </div>
                )
            }
        }}></Image>
    }
}

export default toNative<{
    src?: string
    fallback?: string
    width?: number | string
    height?: number | string
    preview?: boolean
}, {remove: () => void}>(ImageDelete)